<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>开具发票</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .order-item-img {
            max-width: 60px;
            max-height: 60px;
        }
        .order-table td {
            vertical-align: middle !important;
        }
    </style>
    <script>
        // 切换企业发票字段显示
        function toggleCompanyFields() {
            var type = document.getElementById("type").value;
            var companyFields = document.getElementById("companyFields");
            companyFields.style.display = (type === '2') ? 'block' : 'none';

            // 动态设置税号必填
            document.getElementById("tax_id").required = (type === '2');
        }


    </script>
</head>
<body>
<div class="container" style="max-width: 800px; margin-top: 30px;">
    <h2 class="text-center">发票开具</h2>
    <form action="invoice/add"  method="post" onsubmit="return validateForm()">
        <!-- 订单信息展示 -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">订单信息</h4>
            </div>
            <div class="panel-body">
                <!-- 固定显示订单号 -->
                <div class="form-group">
                    <label>订单编号：</label>
                    <span class="form-control-static">${order.no}</span>
                    <input type="hidden" name="orderId" value="${order.orderId}">
                    <input type="hidden" name="orderInfo" id="orderInfo" value="">
                    <input type="hidden" name="goodsName" value="${order.goodsName}">
                    <input type="hidden" name="goodsPrice" value="${order.price}">
                    <input type="hidden" name="goodsNum" value="${order.totalMoney/order.price}">
                    <input type="hidden" name="money" value="${order.totalMoney}">
                </div>

                <!-- 订单商品列表 -->
                <table class="table table-bordered order-table">
                    <thead>
                    <tr>
                        <th style="width: 15%">商品图片</th>
                        <th>商品名称</th>
                        <th style="width: 15%">单价</th>
                        <th style="width: 10%">数量</th>
<%--                        <th style="width: 15%">小计</th>--%>
                    </tr>
                    </thead>
                    <tbody>

                        <tr>
                            <td>
                                <img src="${order.goodsImage}"
                                     class="img-thumbnail order-item-img"
                                     alt="${order.goodsName}">
                            </td>
                            <td>${order.goodsName}</td>
<%--                            <td>¥<fmt:formatNumber value="${item.unitPrice}" pattern="#,##0.00"/></td>--%>
<%--                            <td>${item.quantity}</td>--%>
                            <td>${order.price}</td>
                            <td>${order.totalMoney/order.price}</td>

                        </tr>

                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="4" class="text-right"><strong>订单总额：</strong></td>
                        <td>${order.totalMoney}</td>
                    </tr>
                    </tfoot>
                </table>

            </div>
        </div>



        <!-- 发票信息表单 -->
        <div class="panel panel-default">


            <div class="panel-heading">
                <h4 class="panel-title">发票信息</h4>
            </div>
            <div class="panel-body">
                <!-- 发票抬头 -->
                <div class="form-group">
                    <label for="title">发票抬头 *</label>
                    <input type="text" class="form-control" id="title" name="title"
                           placeholder="请输入发票抬头" required maxlength="255">
                </div>

                <!-- 发票类型 -->
                <div class="form-group">
                    <label>发票类型 *</label>
                    <select class="form-control" id="type" name="type"
                            onchange="toggleCompanyFields()" required>
                        <option value="">请选择类型</option>
                        <option value="1">个人发票</option>
                        <option value="2">企业发票</option>
                    </select>
                </div>

                <!-- 企业发票字段（默认隐藏） -->
                <div id="companyFields" style="display: none;">
                    <div class="form-group">
                        <label for="tax_id">统一社会信用代码 *</label>
                        <input type="text" class="form-control" id="tax_id" name="tax_id"
                               placeholder="请输入18位税号" pattern="[A-Z0-9]{18}"
                               maxlength="18">
                    </div>
                    <div class="form-group">
                        <label for="bank_card">银行账户</label>
                        <input type="text" class="form-control" id="bank_card" name="bank_card"
                               placeholder="请输入企业银行账户" maxlength="255">
                    </div>
                </div>
            </div>
        </div>

        <!-- 提交按钮 -->
        <div class="form-group text-center">
            <button type="submit" class="btn btn-primary btn-lg" >提交开票</button>
            <a href="javascript:history.back()" class="btn btn-default btn-lg">返回修改</a>
        </div>
    </form>

</div>



<script>
    // 初始化企业字段状态
    toggleCompanyFields();

    // 表单验证
    function validateForm() {
        const type = document.getElementById("type").value;
        if(type === '2') {
            const taxId = document.getElementById("tax_id").value;
            if(!taxId || !/^[A-Z0-9]{18}$/.test(taxId)) {
                alert("请输入有效的18位统一社会信用代码");
                return false;
            }
        }
        return true;
    }

</script>
</body>
</html>